import React, { Component } from 'react'
import { Form, Input, Button, Upload, message } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import '../AvailableForm/index.css'
import axios from "axios"
function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
}

function beforeUpload(file) {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
}

export default class AvailableChangeForm extends Component {
    state = {
        loading: false,
    };
    onFinish = (values) => {
        values.id = this.props.location.state.item.id
        fetch('http://60.205.246.238:3001/house/modify', {
            method: 'post',
            headers: {
                "Content-type": "application/json"
            },
            body: JSON.stringify(values)
        }).then((response) => {
            return response.json()
        }).then((data) => {
            console.log(data)
        }).catch(function (error) {
            console.log(error)
        })
        alert("修改成功")
    };
    onDeleteFinish = (values) => {
        console.log(this.props.location.state.item.images[values.image]);
        values.image = this.props.location.state.item.images[values.image]
        console.log(values);
        axios({
            method: 'get',
            url: 'http://60.205.246.238:3001/house/deleteImage',
            headers: {
                "Content-type": "application/json"
            },
            params: values
        }).then((response) => {
            return response
        }).then((data) => {
            console.log(data)
        }).catch(function (error) {
            console.log(error)
        })
    };
    onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    onDeleteFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    handleChange = info => {
        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj, imageUrl =>
                this.setState({
                    imageUrl,
                    loading: false,
                }),
            );
        }
    };

    ImgUpload = (files) => {
        const formData = new FormData()
        formData.append("id", this.state.id)
        formData.append("img", files.file)
        axios({
            method: 'post',
            url: 'http://60.205.246.238:3001/house/saveImages',
            headers: {
                "Content-type": "application/json"
            },
            data: formData
        }).then((response) => {
            return response
        }).then((data) => {
            console.log(data)
        }).catch(function (error) {
            console.log(error)
        })
    }


    render() {
        const {
            owner, property,
            title, price, transtime, linkMan, tel, village,
            address, deedNumber, buildYear, coverArea, buildArea,
            buildStruct, layNum, support,
            images
        } = this.props.location.state.item
        // console.log(images);
        // console.log(images.length);
        const { loading, imageUrl } = this.state;
        const uploadButton = (
            <div>
                {loading ? <LoadingOutlined /> : <PlusOutlined />}
                <div style={{ marginTop: 8 }}>Upload</div>
            </div>
        );
        return (
            <div id='con'>
                <div style={{ marginTop: 40 }} className='formleft'>
                    <Form
                        name="basic"
                        labelCol={{
                            span: 6,
                        }}
                        wrapperCol={{
                            span: 8,
                        }}
                        // defaultValues={{
                        //     remember: true,
                        // }}
                        initialValues={{
                            owner, property,
                            title, price, transtime, linkMan, tel, village,
                            address, deedNumber, buildYear, coverArea, buildArea,
                            buildStruct, layNum, support,
                        }}
                        onFinish={this.onFinish}
                        onFinishFailed={this.onFinishFailed}
                        autoComplete="on"
                    >
                        <Form.Item
                            label="房屋拥有者"
                            name="owner"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your owner!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="产权"
                            name="property"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your property!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="标题"
                            name="title"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your title!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="拟流转价格"
                            name="price"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your price!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="流转时间"
                            name="transtime"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your transTime!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="联系人"
                            name="linkMan"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your linkMan!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="联系电话"
                            name="tel"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your tel!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="房屋所在村"
                            name="village"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your village!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="房屋详细地址"
                            name="address"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your address!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>


                        <Form.Item
                            label="产权证号"
                            name="deedNumber"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your deedNumber!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="建成年份"
                            name="buildYear"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your buildYear!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="占地面积"
                            name="coverArea"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your coverArea!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="建筑面积"
                            name="buildArea"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your buildArea!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="建筑结构"
                            name="buildStruct"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your buildStruct!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="房屋层数"
                            name="layNum"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your layNum!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="配套"
                            name="support"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your support!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>



                        <Form.Item
                            wrapperCol={{
                                offset: 8,
                                span: 16,
                            }}
                        >
                            <Button type="primary" htmlType="submit">
                                提交
                            </Button>
                        </Form.Item>
                    </Form>
                </div >
                <div className='formiddle'>
                    <div style={{ height: 40 }}></div>
                    <div>
                        <div><p id="des">
                            该项目的对应图片如下：
                        </p></div>

                        {
                            images.map((item, index) => {
                                return (
                                    <div className='imgcon'>
                                        {index}
                                        < img src={item} alt="" key={index} />
                                    </div>
                                )
                            })
                        }
                        <div><p id="des">
                            请在这里进行图片删除：
                        </p></div>

                        <Form
                            onFinish={this.onDeleteFinish}
                            onFinishFailed={this.onDeleteFinishFailed}>
                            <Form.Item
                                label="您要删除的图片id"
                                name="image"
                                rules={[
                                    {
                                        required: true,
                                        message: 'Please input your imgid!',
                                    },
                                ]}
                            >
                                <Input />
                            </Form.Item>

                            <Form.Item
                                wrapperCol={{
                                    offset: 8,
                                    span: 16,
                                }}
                            >
                                <Button type="primary" htmlType="submit">
                                    提交
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>
                </div >
                <div className='formright'>
                    <div style={{ height: 40 }}></div>
                    <div><p id="des">
                        请在此处上传新图片：
                    </p></div>
                    <Upload
                        customRequest={this.ImgUpload}
                        maxCount='1'
                        name="avatar"
                        listType="picture-card"
                        className="avatar-uploader"
                        showUploadList={false}
                        action="/house/upload"
                        beforeUpload={beforeUpload}
                        onChange={this.handleChange}
                    >
                        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                    </Upload>
                </div>
            </div >
        )
    }
}
